<template>
  <div class="app-container">
    <div class="main">
      <div class="step">
        <el-steps
          :space="200"
          align-center
          :active="curStep"
          finish-status="success"
        >
          <el-step title="待授权"></el-step>
          <el-step title="已授权"></el-step>
        </el-steps>
      </div>
      <div style="text-align: center" v-if="mpInfo.is_auth === 1">
        <h4>你已完成授权</h4>
        <h3>授权公众号：{{ mpInfo.nick_name }}</h3>
      </div>
      <el-link
        v-else
        type="primary"
        icon="el-icon-s-promotion"
        :href="authHref"
        referrerpolicy="origin"
        target="_self"
        >去授权</el-link
      >
    </div>
    <!-- <x-table
      v-loading="tableLoading"
      :tableData="info.items"
      :propList="propList"
    >
    </x-table> -->
  </div>
</template>

<script>
import { getAuthLink, getAuthMpInfo } from "@/api/mpManage/mpAuth";
export default {
  name: "mpauthindex",
  data() {
    return {
      authRes: false,
      mpInfo: {
        is_auth: 0,
      },
      curStep: 0,
      authHref: "",
      propList: [
        {
          label: "状态",
          prop: "state",
          slotName: "state",
        },
      ],
      tableLoading: false,
      info: {
        items: [],
      },
    };
  },
  computed: {},
  created() {
    this.authRes = this.$route.query.is_success || false;
    if (this.authRes) {
      this.$message.success("授权成功!");
    }
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
    },
    async getAuthLink() {
      const { data } = await getAuthLink();
      this.authHref = data;
      console.log("url", this.authHref);
    },
    async getInfo() {
      const { data } = await getAuthMpInfo();
      console.log(data);
      // this.is_auth = data.is_auth;
      this.mpInfo = data || {};
      if (this.mpInfo.is_auth === 1) {
        this.curStep = 2;
      } else {
        // 未授权才获取链接
        this.getAuthLink();
        this.curStep = 1;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 100px;
  .step {
    width: 50vw;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
}
.el-steps {
  width: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
